babel-plugin-preval
Advanced tools
Pre-evaluate code at build-time
You need to do some dynamic stuff, but don't want to do it at runtime. Or maybe you want to do stuff like read the filesystem to get a list of files and you can't do that in the browser.
This allows you to specify some code that runs in Node and whatever you
module.exports in there will be swapped. For example:
const x = preval`module.exports = 1`
// ↓ ↓ ↓ ↓ ↓ ↓
const x = 1
Or, more interestingly:
const x = preval`
const fs = require('fs')
const val = fs.readFileSync(__dirname + '/fixture1.md', 'utf8')
module.exports = {
val,
getSplit: function(splitDelimiter) {
return x.val.split(splitDelimiter)
}
}
`
// ↓ ↓ ↓ ↓ ↓ ↓
const x = {
val: '# fixture\n\nThis is some file thing...\n',
getSplit: function getSplit(splitDelimiter) {
return x.val.split(splitDelimiter)
},
}
There's also preval.require('./something') and
import x from /* preval */ './something' (which can both take some arguments)
or add // @preval comment at the top of a file.
See more below.
babel-plugin-macrosThis module is distributed via npm which is bundled with node and
should be installed as one of your project's devDependencies:
npm install --save-dev babel-plugin-preval
Important notes:
preval is not run in a sandboxed environmentYou may like to watch this YouTube video to get an idea of what preval is and how it can be used.
Before:
const greeting = preval`
const fs = require('fs')
module.exports = fs.readFileSync(require.resolve('./greeting.txt'), 'utf8')
`
After (assuming greeting.txt contains the text: "Hello world!"):
const greeting = 'Hello world!'
preval can also handle some simple dynamic values as well:
Before:
const name = 'Bob Hope'
const person = preval`
const [first, last] = require('./name-splitter')(${name})
module.exports = {first, last}
`
After (assuming ./name-splitter is a function that splits a name into
first/last):
const name = 'Bob Hope'
const person = {first: 'Bob', last: 'Hope'}
Before:
import fileList from /* preval */ './get-list-of-files'
After (depending on what ./get-list-of-files does, it might be something
like):
const fileList = ['file1.md', 'file2.md', 'file3.md', 'file4.md']
You can also provide arguments which themselves are prevaled!
Before:
import fileList from /* preval(3) */ './get-list-of-files'
After (assuming ./get-list-of-files accepts an argument limiting how many
files are retrieved:
const fileList = ['file1.md', 'file2.md', 'file3.md']
Before:
const fileLastModifiedDate = preval.require('./get-last-modified-date')
After:
const fileLastModifiedDate = '2017-07-05'
And you can provide some simple dynamic arguments as well:
Before:
const fileLastModifiedDate = preval.require(
'./get-last-modified-date',
'../../some-other-file.js',
)
After:
const fileLastModifiedDate = '2017-07-04'
// @preval)Using the preval file comment will update a whole file to be evaluated down to an export.
Whereas the above usages (assignment/import/require) will only preval the scope of the assignment or file being imported.
Before:
// @preval
const id = require('./path/identity')
const one = require('./path/one')
const compose = (...fns) => fns.reduce((f, g) => a => f(g(a)))
const double = a => a * 2
const square = a => a * a
module.exports = compose(square, id, double)(one)
After:
module.exports = 4
If you export a function from a module that you're prevaling (whether using
preval.require or the import comment), then that function will be called and
whatever is returned will be the prevaled value.
It's important to know this if you want to have the prevaled value itself be a function:
Example:
// example-module.js
const fn = message => `The message is: ${message}`
module.exports = () => fn
Usage of preval:
const theFn = preval.require('./example-module.js')
Generated code:
const theFn = message => `The message is: ${message}`
.babelrc (Recommended).babelrc
{
"plugins": ["preval"]
}
babel --plugins preval script.js
require('babel-core').transform('code', {
plugins: ['preval'],
})
babel-plugin-macrosOnce you've
configured babel-plugin-macros
you can import/require the preval macro at babel-plugin-preval/macro. For
example:
import preval from 'babel-plugin-preval/macro'
const one = preval`module.exports = 1 + 2 - 1 - 1`
You could also use
preval.macroif you'd prefer to type less 😀
babel-plugin-prevalpreval.macro to determine Algolia options based on
process.env.LOCALE. It also uses preval.macro to load an
svg file as a string, base64 encode it, and use it as a background-url
for an input element.If you use babel-plugin-transform-decorators-legacy, there is a conflict
because both plugins must be placed at the top
Wrong:
{
"plugins": ["preval", "transform-decorators-legacy"]
}
Ok:
{
"plugins": ["preval", ["transform-decorators-legacy"]]
}
prepack is intended to be run on your final bundle after you've run
your webpack/etc magic on it. It does a TON of stuff, but the idea is that your
code should work with or without prepack.
babel-plugin-preval is intended to let you write code that would not work
otherwise. Doing things like reading something from the file system are not
possible in the browser (or with prepack), but preval enables you to do this.
This plugin was inspired by webpack's val-loader. The benefit of
using this over that loader (or any other loader) is that it integrates with
your existing babel pipeline. This is especially useful for the server where
you're probably not bundling your code with webpack, but you may be
using babel. (If you're not using either, configuring babel for this would be
easier than configuring webpack for val-loader).
In addition, you can implement pretty much any webpack loader using
babel-plugin-preval.
If you want to learn more, check webpack documentations about
loaders.
I needed something like this for the glamorous website. I live-streamed developing the whole thing. If you're interested you can find the recording on my youtube channel (note, screen only recording, no audio).
I was inspired by the val-loader from webpack.
preval.macro - nicer integration with babel-plugin-macrosdefine_macro-loader -
Integrate preval with C-Like macros, thus, increasing preval use cases.I'm not aware of any, if you are please make a pull request and add it here!
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
FAQs
Pre-evaluate code at build-time
The npm package babel-plugin-preval receives a total of 32,642 weekly downloads. As such, babel-plugin-preval popularity was classified as popular.
We found that babel-plugin-preval demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.
